<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>发布考试</title>
    <link href="../resources/bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="../resources/bootstrap/css/bootstrapValidator.min.css" rel="stylesheet">
    <link href="../resources/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="../resources/css/style.css" rel="stylesheet">
    <link rel="stylesheet" href="../resources/layui/css/layui.css"/>
    <link href="../resources/css/jquery-ui-1.9.2.custom.min.css" rel="stylesheet" type="text/css"/>
    <link href="../resources/css/question-add.css" rel="stylesheet">
    <!-- jQuery -->
    <script type="text/javascript" src="../resources/js/jquery/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="../resources/js/all.js"></script>
    <!-- Bootstrap JS -->
    <script type="text/javascript" src="../resources/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../resources/js/jquery/jquery-ui-1.9.2.custom.min.js"></script>
    <script type="text/javascript" src="../resources/js/jquery.ui.datepicker-zh-TW.js"></script>
    <!--layui相关-->
    <script type="text/javascript" src="../resources/layui/layui.all.js"></script>
    <!--表单验证-->
    <script type="text/javascript" src="../resources/bootstrap/js/bootstrapValidator.min.js"></script>
    <script type="text/javascript" src="../resources/vue/vue.js"></script>
</head>
<body>
<header>

    <div class="logo">
        <h1>在线考试系统</h1>
    </div>

    <div class="navbar bs-docs-nav" role="banner">
        <div class="container" style="margin: 0  264px ;">
            <ul class="nav navbar-nav">
                <li class="nav-tabs">
                    <a href="main.html" style="font-size: 1.2em; width: 135px;"><i
                            class="glyphicon glyphicon-home"></i>&nbsp;首页</a>
                </li>
                <li>
                    <a href="/view/question/question-list" style="font-size: 1.2em;width: 132px;"><i
                            class="glyphicon glyphicon-list"></i>&nbsp;试题管理</a>
                </li>

                <li>
                    <a href="exampaper-list.html" style="font-size: 1.2em;width: 132px;"><i
                            class="glyphicon glyphicon-list-alt"></i>&nbsp;试卷管理</a>
                </li>
                <li class="nav-tabs">
                    <a href="exam-list.html" style="font-size: 1.2em;width: 132px;"><i
                            class="glyphicon glyphicon-indent-right"></i>&nbsp;考试管理</a>
                </li>
                <li>
                    <a href="/toUser.do" style="font-size: 1.2em;width: 130px;"><i
                            class="glyphicon glyphicon-user"></i>&nbsp;用户管理</a>
                </li>
                <li>
                    <a href="/toTag.do" style="font-size: 1.2em;width: 132px;"><i
                            class="glyphicon glyphicon-random"></i>&nbsp;通用管理</a>
                </li>
                <li>
                    <a href="/toSystem.do" style="font-size: 1.2em;width: 132px;"><i
                            class="glyphicon glyphicon-cog"></i>&nbsp;系统设置</a>
                </li>
            </ul>
            <a href="/userLogout" style="position: absolute;right: 100px; top: 10px;"><i class=""></i>[注销]</a>
        </div>

    </div>
</header>




<div id="exam-content-left" style="width: 150px; position: relative ;left: 220px; float: left">
    <ul class="nav nav-pills nav-stacked" style="font-size: 1.1em; margin-top: 100px; text-align: right;">

        <li>
            <a href="exam-list.html"> <i class="glyphicon glyphicon-random"></i> 考试管理 </a>
        </li>
        <li class="active">
            <a> <i class="glyphicon glyphicon-random"></i> 发布考试 </a>
        </li>
        <li >
            <a href="exampast_list.html"> <i class="glyphicon glyphicon-log-out"></i>考试历史 </a>
        </li>
    </ul>
</div>

<div class="container">
    <div class="col-xs-10" id="right-content">
        <div id="app" class="container">
            <div class="table-responsive" style="width: 850px;">
            <div class="page-header">
                <h1><i class="fa fa-file-text-o"></i> 发布考试 </h1>
            </div>
            <div class="page-content">
                <form id="form-examp-add">
                    <div class="form-group">
                        <span class="form-label"><span class="warning-label">*</span>考试名称：</span>
                        <input type="text" class="form-control" id="examName" name="examName">
                    </div>
                    <div class="form-group">
                        <span class="form-label"><span class="warning-label">*</span>考试类型：</span>
                        <select class="form-control" id="examType">
                            <option value="1">正常考试</option>
                            <option value="2">模拟考试</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <span class="form-label"><span class="warning-label">*</span>选择试卷：</span>

                        <input type="text" value="" id="examPaperId" hidden >
                        <input type="text" placeholder="请选择点击试卷" id="selectExamPaper" name="ExamPaper" class="form-control">
                    </div>
                    <div class="form-group">
                        <span class="form-label"><span class="warning-label">*</span>考试简介：</span><textarea
                            style="resize: none;width: 300px;height: 200px" placeholder="考试简介"
                            id="examIntro" class="form-control"></textarea>
                    </div>
                    <div class="form-group">
                            <span class="warning-label">*</span>请选择考试开始时间: <input
                                class="form-control" placeholder="点击选择考试开始时间" type="text" id="startTime" readonly name="startTime">
                    </div>
                    <div class="form-group">
                            <span class="warning-label">*</span>请选择考试截止时间: <input
                                class="form-control" placeholder="点击选择考试结束时间" type="text" id="endTime" readonly name="endTime">
                    </div>
                    <div class="form-group">
                        <input value="确认发布" type="button" id="exam-add-btn" class="btn btn-info">
                    </div>
                </form>

            </div>
        </div>
    </div>
    </div>
</div>
<footer>
    <div class="container" style="width: 500px; margin: 0 auto;">
        <div class="row">
            <div class="col-md-12">
                <div class="copy">
                    <p>
                        ExamManage © <a href="javascript:void(0);" target="_blank">ExamManage</a> - <a
                            href="javascript:void(0);" target="_blank">主页</a> | <a href="javascript:void(0);" target="_blank">关于我们</a>
                        | <a href="javascript:void(0);" target="_blank">FAQ</a> | <a
                            href="javascript:void(0);" target="_blank">联系我们</a>
                    </p>
                </div>
            </div>
        </div>
    </div>
</footer>
</body>
</html>
<script type="text/javascript">
    $(function () {
        //时间选择
        layui.use('laydate', function () {
            var laydate = layui.laydate;
            //日期时间选择器
            laydate.render({
                elem: '#startTime'
                , type: 'datetime'
            });
        });
        layui.use('laydate', function () {
            var laydate = layui.laydate;
            //日期时间选择器
            laydate.render({
                elem: '#endTime'
                , type: 'datetime'
            });
        });
    });

    //弹出遮罩层 郭瀚钰
    $("#selectExamPaper").click(function () {
        layer.open({
            type: 2,
            title: '选择试卷',
            fix: false,
            maxmin: true,
            shadeClose: true,
            area: ['1100px', '600px'],
            content: 'find-examPaper.html',
            end: function () {
            }
        });
    });


    var subExam = function (){
            $.ajax({
                type: "POST",
                url: "/ExamAddExam",
                data: {
                    examName: $("#examName").val(),
                    examType: $("#examType").val(),
                    examPaperId: $("#examPaperId").val(),
                    examIntro: $("#examIntro").val(),
                    startTime: $("#startTime").val(),
                    endTime: $("#endTime").val()
                },
                success: function (data) {
                    if (data > 0) {
                        alert("发布成功!");
                    } else {
                        alert("失败!");
                    }
                },error:function () {
                    //alert("失败!11111")
                }
            });
    };


    $("#exam-add-btn").click(function () {
        $("#form-examp-add").bootstrapValidator('validate');//提交验证
        if ($("#form-examp-add").data('bootstrapValidator').isValid()) {//获取验证结果，如果成功，执行下面代码
            subExam();
        }
    });

    $('#form-examp-add').bootstrapValidator({
        live: 'disabled',//验证时机，enabled是内容有变化就验证（默认），disabled和submitted是提交再验证
        excluded: [':disabled', ':hidden', ':not(:visible)'],//排除无需验证的控件，比如被禁用的或者被隐藏的
        submitButtons: '#btn-add',//指定提交按钮，如果验证失败则变成disabled
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            examName: {
                validators: {
                    notEmpty: {//检测非空,radio也可用
                        message: '必须输入考试名'
                    },
                    stringLength: {//检测长度
                        max: 30,
                        message: '长度必须小于30'
                    }
                }
            },
            ExamPaper:{
                validators: {
                    notEmpty: {//检测非空,radio也可用
                        message: '必须选择试卷'
                    }
                }
            },
            startTime:{
                validators: {
                    notEmpty: {//检测非空,radio也可用
                        message: '必须选择开始时间'
                    }
                }
            },
            endTime:{
                validators: {
                    notEmpty: {//检测非空,radio也可用
                        message: '必须选择结束时间'
                    }
                }
            }
        }
    });

</script>